import React, { Component, RefObject, createRef } from 'react'
import { Spin, Card, Form, Button, message } from 'antd'
import { FormInstance } from 'antd/lib/form'
import wangeditor from 'wangeditor'
import { footerReq, modifyFooterReq } from '../../../../requests/footer'
import { Store, ValidateErrorEntity } from 'rc-field-form/lib/interface'
import {getRes} from "../../../../configFile";

interface IProps { }
interface IState {
    isLoading: boolean
    editorContent: string
}
export default class ModifyFooter extends Component<IProps, IState> {

    constructor(props: IProps) {
        super(props)
        this.state = {
            editorContent: '',
            isLoading: true
        }
    }

    // 编辑器引用
    editorRef: RefObject<HTMLDivElement> = createRef()
    //创建Form引用  
    formRef = React.createRef<FormInstance>()
    //初始化富文本编辑器
    //编辑器实例声明 再didmount后操作DOM
    editor: any
    initEditor = () => {
        this.editor = new wangeditor(this.editorRef.current)
        this.editor.customConfig.zIndex = 100
        this.editor.customConfig.onchange = (htmlContent: string) => {
            if (this.formRef.current)
                this.formRef.current.setFieldsValue({ 'content': htmlContent })
            else
                console.log('不存在引用');

        }
        this.editor.create()
    }

    componentDidMount = async () => {
        this.initEditor()       //操作DOM初始化editor
        try {
            const res = getRes(await footerReq())
            if (res.isSuccessful === true) {
                this.editor.txt.html(res.data)
                //设置表单域    实例不为空
                if (this.formRef.current) {
                    console.log(res.data);
                    this.formRef.current.setFieldsValue({ content: res.data })
                    console.log(this.formRef.current.getFieldValue('content'));

                }
                else
                    console.log('didmount不存在引用');

            } else {
                message.error(res.message)
            }
            this.setState({
                ...this.state,
                isLoading: false
            })
        } catch (err) {
            message.error(err.toString())
        }
    }

    //提交失败
    onFinishFailed = (errorInfo: ValidateErrorEntity) => {
        message.error(errorInfo.errorFields[0].errors[0]);
    };

    //提交成功
    onFinish: (values: Store) => void = async values => {
        console.log(values);
        this.setState({
            ...this.state,
            isLoading: true
        })

        try {
            const res = getRes(await modifyFooterReq(values.content))
            if (res.isSuccessful === true) {
                message.success("修改成功")
            } else {
                message.error("修改失败")
            }
        } catch (err) {
            message.error(JSON.stringify(err))
        } finally {
            this.setState({
                ...this.state,
                isLoading: false
            })
        }
    }


    render() {
        return (
            <div>
                <Spin spinning={this.state.isLoading}>
                    <Card title='修改页脚信息'>
                        <Form
                            onFinishFailed={this.onFinishFailed}
                            onFinish={this.onFinish}
                            ref={this.formRef}
                            name="articleModify"
                            hideRequiredMark
                        >


                            <Form.Item
                                name="content"
                                rules={[
                                    {
                                        required: true,
                                        message: '内容必填',
                                    },
                                ]}
                            >
                                <div className="editorDiv" ref={this.editorRef} />
                            </Form.Item>


                            <Form.Item
                            >
                                <Button type="primary" htmlType="submit" size="large">
                                    确认修改
                            </Button>
                            </Form.Item>

                        </Form>
                    </Card>
                </Spin>
            </div>
        )
    }
}
